<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>距离测量</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/openlayers/4.0.1/ol.css" rel="stylesheet">

</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
<div id="map" style="width: 100%;height:100%;border: 1px solid #dddddd"></div>

<script src="http://cdn.bootcss.com/openlayers/4.0.1/ol-debug.js"></script>
<script type="text/javascript" src="../../dist/iclient9-openlayers.js"></script>
<script type="text/javascript">
    var map, interaction, vectorLayer,
            url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
    map = new ol.Map({
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 3,
            projection: 'EPSG:4326'
        })
    });
    var layer = new ol.layer.Tile({
        source: new ol.supermap.TileSuperMapRest({
            url: url
        }),
        projection: 'EPSG:4326'
    });
    map.addLayer(layer);
    measureService('area');

    function measureService(type) {
        var source = new ol.source.Vector({wrapX: false});
        vectorLayer = new ol.layer.Vector({
            source: source
        });
        map.addLayer(vectorLayer);
        if (type === 'area') {
            interaction = new ol.interaction.Draw({
                source: source,
                type: "Polygon",
                finishCondition: function (MapBrowserPointerEvent) {
                    if (MapBrowserPointerEvent) {
                        var points = MapBrowserPointerEvent.frameState.pixelToCoordinateTransform;
                        var polygonCoords = [];
                        for (var i = 0; i < points.length; i = i + 2) {
                            polygonCoords.push([points[i], points[i + 1]]);
                        }
                        var areaMeasureParam = new SuperMap.MeasureParameters(new ol.geom.Polygon([polygonCoords]));
                        new ol.supermap.MeasureService(url).measureArea(areaMeasureParam, function (serviceResult) {
                            alert(serviceResult.result.area + "平方米");
                        });
                    }
                    return true;
                }
            })
        }
        map.addInteraction(interaction);
    }
</script>
</body>
</html>